<div class="span-8">
  <h3>Raphael.sketchpad</h3>
  <p>
    Creates a Raphael SketchPad widget.
  </p>

  <h4>Parameters</h4>
  <ol>
    <li>container <code>Raphael</code> or <code>string</code></li>
    <li>options <code>object</code></li>
  </ol>

  <h4>Possible options attributes</h4>
  <ul>
    <li>width <code>number</code> (100)</li>
    <li>height <code>number</code> (100)</li>
    <li>input <code>string</code> (null)</li>
    <li>strokes <code>array</code> (empty array)</li>
    <li>update_input <code>boolean</code> (false)</li>
  </ul>
</div>
<div class="span-16 last">
  {% capture js %}
// Each of the examples creates a widget that is 100px wide and 100px high.

// Creates an editor at the top left corner of the #editor element.
// The editor is initialized with strokes from the #data form field.
// Sketches are stored in the #data form field.
var editor = Raphael.sketchpad("editor", {
  width: 100,
  height: 100,
  input: "#data"
});

// Creates a viewer at the top left corner of the #viewer element
// initialized with the stroke data.
var viewer = Raphael.sketchpad("viewer", {
  width: 100,
  height: 100,
  strokes: [{
    type:"path",
    path:[["M",10,10],["L",90,90]],
    fill:"none", "stroke":"#000000",
    stroke-opacity:1,
    stroke-width:5,
    stroke-linecap:"round",
    stroke-linejoin:"round"
  }]
});
{% endcapture %}

  <pre class="code">{{ js | strip | escape }}</pre>
</div>
